import { Col, Row } from 'antd'
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import { get_products_by_id } from '../../store/actions/productDetail'
import Layout from './Layout'
import ProductItem from './ProductItem'


function ProductDetail() {
  const {productId} = useParams()
  const dispatch = useDispatch()
  const product = useSelector(state => state.productdetail)
  // console.log(product)
  // console.log(Object.keys(product).length)
  useEffect(() => {
    dispatch(get_products_by_id({ productId }))
     // eslint-disable-next-line
  },[])
  return (
    <Layout title='商品名称' subTitle='let us go'>
      <Row>
        <Col span={16}>
          {Object.keys(product).length > 0 && (
            <ProductItem product={product} productId={ productId }
            imgStyle={{width: '50%', margin:'0, auto'}} showView={false} />
          )}
        </Col>
        <Col span={8}>right</Col>
      </Row>
    </Layout>
  )
}

export default ProductDetail
